Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

plyr

Package Overview
Dependencies
Maintainers
1
Versions
159
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

plyr

A simple, accessible and customizable HTML5, YouTube and Vimeo media player

  • 3.7.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
128K
increased by5.48%
Maintainers
1
Weekly downloads
 
Created

What is plyr?

Plyr is a simple, lightweight, and customizable HTML5 media player that supports video, audio, and YouTube/Vimeo embeds. It provides a consistent interface across different media types and is highly extensible.

What are plyr's main functionalities?

Video Player

This code demonstrates how to set up a basic video player using Plyr. It includes the necessary CSS and JavaScript files from the Plyr CDN and initializes the player on a video element.

<html>
<head>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
</head>
<body>
  <video id="player" playsinline controls>
    <source src="path/to/video.mp4" type="video/mp4" />
  </video>
  <script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>
  <script>
    const player = new Plyr('#player');
  </script>
</body>
</html>

Audio Player

This code demonstrates how to set up a basic audio player using Plyr. It includes the necessary CSS and JavaScript files from the Plyr CDN and initializes the player on an audio element.

<html>
<head>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
</head>
<body>
  <audio id="player" controls>
    <source src="path/to/audio.mp3" type="audio/mp3" />
  </audio>
  <script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>
  <script>
    const player = new Plyr('#player');
  </script>
</body>
</html>

YouTube Embed

This code demonstrates how to embed a YouTube video using Plyr. It includes the necessary CSS and JavaScript files from the Plyr CDN and initializes the player on a div element with YouTube embed data attributes.

<html>
<head>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
</head>
<body>
  <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
  <script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>
  <script>
    const player = new Plyr('#player');
  </script>
</body>
</html>

Vimeo Embed

This code demonstrates how to embed a Vimeo video using Plyr. It includes the necessary CSS and JavaScript files from the Plyr CDN and initializes the player on a div element with Vimeo embed data attributes.

<html>
<head>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
</head>
<body>
  <div id="player" data-plyr-provider="vimeo" data-plyr-embed-id="76979871"></div>
  <script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>
  <script>
    const player = new Plyr('#player');
  </script>
</body>
</html>

Other packages similar to plyr

Keywords

FAQs

Package last updated on 24 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc